<template>
  <div class="Root">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多啦...."
        @load="onLoad"
        :immediate-check="false"
        offset="50"
      >
        <ArticleItem
          v-for="item in articleList"
          :key="item.art_id"
          :artitem="item"
          @disLikeEV="disLikefn"
          @reportEV="reportfn"
          @click.native="$router.push(`/article_detail?aid=${item.art_id}`)"
        >
        </ArticleItem>
      </van-list>
      <!-- list   上来就触底啦 -->
    </van-pull-refresh>
    
  </div>
</template>


<script>
import ArticleItem from "@/components/ArticleItem.vue";
import { getAllArticleListAPI,articleDislikeAPI,reportArticleAPI } from "@/api/index";
import {Notify} from 'vant'
export default {
  name: "",
  components: {
    ArticleItem,
  },
  props: {
    channelId: Number,
  },
  data() {
    return {
      articleList: [],
      loading: false,
      finished: false,
      timestamp: new Date().getTime(), //先存储第一次时间
      isLoading: false,
      fltimestamp:new Date().getTime()
    };
  },
  watch: {},
  computed: {},
  methods: {
    onLoad() {
      console.log(123);
      if(this.articleList.length === 0){
        this.isLoading = false;
        return
      }else{
        this.getArticleListFn()
      }
      
    },
    async getArticleListFn(){
       let res = await getAllArticleListAPI({
        channel_id: this.channelId,
        timestamp: this.timestamp,
      });
      this.articleList = [...this.articleList, ...res.data.data.results];
      //把每次时间都给过去,会返回下一次的文章
      this.timestamp = res.data.data.pre_timestamp;
      this.loading = false;
      if (res.data.data.results.pre_timestamp === null) {
        this.finished = true;
        return;
      }
    },
    async onRefresh() {      
        this.articleList = [];
        this.fltimestamp = new Date().getTime();
          let res =await  getAllArticleListAPI({
            channel_id: this.channelId,
            timestamp: this.fltimestamp,
          });
        this.articleList = res.data.data.results
        this.isLoading = false;
    },
    async disLikefn(target){
      const res = await articleDislikeAPI({target:target})
    
      Notify({type:'success',message:'反馈成功'})
    },
    async reportfn(id,value){
      const res = reportArticleAPI({target:id,type:value})
      Notify({type:'success',message:'举报成功'})
    }
  },
  async created() {
 
    let res = await getAllArticleListAPI({
      channel_id: this.channelId,
      timestamp: this.timestamp,
    });
    this.articleList = res.data.data.results;
    this.timestamp = res.data.data.pre_timestamp;
  
    
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
@media screen and (min-width: 200px) and (max-width: 1600px) {
}
@media screen and (min-width: 1601px) {
}
</style>